<template>
    <section class="server_register_form overflowYAll">
    	<el-form ref="form" :model="form" :rules="rules2" label-width="106px"  v-loading="loading" >
    		<span class="block">基本信息</span>	
			<el-form-item label="资源名称"  prop="name">
				<el-input v-model="form.name"></el-input>
			</el-form-item>
			  
			<el-form-item label="资源标识">
			<span>由系统自动生成</span>
			</el-form-item>
			  
			<el-form-item label="服务方名称" reuqired >
				<el-select v-model="form.producerId" placeholder="请选择">
					<el-option v-for="item in fuwuName" :key="item.id" :label="item.name" :value="item.id"></el-option>
				</el-select>
			</el-form-item>
			  
			<!--业务类型，信息类型多选-->
				<yw-info-desc-form 
				:yewuType="yewuType"
				:infoType="infoType"
				:timeSubmit="ywInfoDescTimeSubmit"
				@outPutForm = "ywInfoDescOutPutForm"
				:hasDataYwInfoDesc="hasDataYwInfoDesc"
				>
			</yw-info-desc-form>
				
			<!--******************数据来源***********************************-->				
			<p class="dashed"></p>
			<span class="block">资源信息</span>	
			<el-form-item label="资源所在网段" reuqired>
				<el-radio-group v-model="form.segmentId" @change ="chooseResource" >
					<el-radio v-for="(item,index) in resocureRadio" 
						:label="item.id"
							:value="item"
							:key="index">
							{{item.name}}
					</el-radio>
				</el-radio-group>
			</el-form-item>

			<el-form-item label="数据来源(单选)" reuqired>
				<el-radio-group v-model="form.dataOrigin" @change="change">
					<el-radio-button class="box-radio" label="jiekou">接口</el-radio-button>
					<el-radio-button class="box-radio" label="wenjian">文件</el-radio-button>
					<el-radio-button class="box-radio"  label="datadb">数据库</el-radio-button>
				</el-radio-group>
			</el-form-item>
    			
			<!--接口的form-->
			<jiekou-form :timeSubmit="jiekouTimeSubmit" 
				:resourceWeb= "resourceWeb"
				@outPutForm = "jiekouOutPutForm" 
				:HasDataForm="HasDataForm"
				v-show="secondForm==='jiekou'">
			</jiekou-form>
			<!--文件的form-->
			<wenjian-form  :timeSubmit="wenjianTimeSubmit" 
				:resourceWeb= "resourceWeb"
				@outPutForm = "wenjianOutPutForm" 
				:HasDataForm="HasDataForm"
				v-show="secondForm==='wenjian'">
			</wenjian-form>
			<!--数据库的form-->
			<datadb-form :timeSubmit="datadbTimeSubmit"
				:resourceWeb= "resourceWeb"
				@outPutForm = "datadbOutPutForm" 
				:HasDataForm="HasDataForm"
				v-show="secondForm==='datadb'">
			</datadb-form>
			<!--************************************通用策略*******************************************************************-->			
			<p class="dashed"></p>
			<span class="block">通用策略</span>			
		
			<special-cenue :hasData="cenueHasData" :timeSubmit="tongyongTimeSubmit"  @outPutForm = "tongyongOutPutForm"></special-cenue>
		
			<p class="dashed"></p>
			<span class="block">发布信息</span>		
				
			<el-form-item label="可发布区域" reuqired>
				<el-checkbox-group v-model="form.nodeIds" @change="fabuAreaChange">
					<el-checkbox  v-for="(item,index) in fabuAreaRadio" 
						:label="item.id"
						:name = "item.name"
						:key="index">
						{{item.name}}
					</el-checkbox>
				</el-checkbox-group>
			</el-form-item>
			
			<p class="fixed_button">
				<el-button type="primary" @click="goBack">取消</el-button>
				<el-button type="primary" @click = "submit" >确定</el-button>
			</p>
		</el-form>
    </section>
</template>

<script>
	import specialCenue from "../common/specialCenue"
    import jiekouForm from "./components/jiekouForm"
    import wenjianForm from "./components/wenjianForm"
    import datadbForm from "./components/datadbForm"
    import echatsBing from "../common/echats_bing"
    import threeBing from "../common/threeBing"
    import ywInfoDescForm from "../common/yw_info_desc"
    import {
    	componentSearchName,
    	componentServerRegister,
    	componentServerRegisterGetFabuArea,
    	componentGetDetail,
    	computedDealRegisterUpdata,
    	componentServerRegisterFormUpdata,
    	computedCheckName,
    } from "../common/js_css_img/serverResourceComputed"
    import {
    	everyMonthCheckBoxJson,
    	everyWeekCheckBoxJson,
    	jiekouFormTableLabelJson
    } from "../common/js_css_img/jsonDiy"
    export default {
    	props:{
    		treeSeach:Object,
    		id:Number,
    		updataId:Number,
    		
    	},
    	components:{
    		ywInfoDescForm,
    		jiekouForm,
    		wenjianForm,
    		datadbForm,
    		echatsBing,
    		threeBing,
    		specialCenue
    	},
        data(){
          	var checkName = (rule, value, callback) => {
				if (!value) {
				return callback(new Error('名字不能为空'));
				}
				computedCheckName(this,value,this.form.id,'zyzc');
				setTimeout(()=>{
				if(this.has){
					return callback(new Error('名称已存在，请重新输入'));
				}else {
					callback();  //必须要有回调，要不然表单无法提交
				}
				},1500)
	      	};
          	return {
          		has:false,
          		loading:false,
          		fileList:[],/*上传的文件*/
          		resourceWeb:0,/*选中的资源网段*/
          		datadbTimeSubmit :false,/*数据库字段*/
          		jiekouTimeSubmit:false,/*接口form*/
          		wenjianTimeSubmit:false,/*文件form的form值*/
          		ywInfoDescTimeSubmit:false,/*业务类型，信息类型，描述form的值*/
          		tongyongTimeSubmit:false,/*通用策略传form的值*/
          		hasChooseFabuAreaRadio:'',
          		everyMonthVisible:false,
          		everyMonth:[],/*多选，选择日*/
          		secondForm:'',/*第二个表单*/
          		fuwuTypeFileButton:false,
          			cenueHasData:{
          			frequency:'',
					frequencyUnit:'',
					flow:'',
					flowUnit:'',
					timeTpye:'',
					timeValue:""
          		},
          		hasDataYwInfoDesc:{
          			businessType:'',
          			infoType:'',
          			describe:'',
          		},
          		HasDataForm:{
          			inServiceDataSource:{},
          			outServiceDataSourceList:[],
          		},
          		form:{
          			id:0,  //必传
          			name:'',
          			producerId:'',
          			businessType:[],
          			infoType:[],
          			nodeIds:[],
          			type: "1",
								segmentId:'',
								dataOrigin:'jiekou',
          			describe:'',
          			accessTactics:{},
					inServiceDataSource:{/*输入*/
					
					},
					outServiceDataSourceList:[/*输出*/
						
					]
          		},
          		jiekouFormTableData:[
          			{
          				canshuName :'参数名',
	          			chineseName:"中文名",
	          			yuanData:'对应的元数据',
	          			ishas:"是否必填",
	          			ischeck:"是否校验",
          			}
          		],
          		jiekouFormTableLabel:jiekouFormTableLabelJson,
          		fuwuName:[],
          		yewuType:[],
          		infoType:[],
          		everyWeekCheckBox:everyWeekCheckBoxJson,
          		everyMonthCheckBox:everyMonthCheckBoxJson,
          		resocureRadio:[],/*网段信息*/
          		fabuAreaRadio:[],
          		rules2:{
          			 name: [
			            { validator: checkName, trigger: 'blur' }
			          ]
          		}
          	};
        },
        methods: {
			/*上传相关操作*/
			handleRemove(file, fileList) {
				console.log(file, fileList);
			},
			handlePreview(file) {
				console.log(file);
			},
			handleExceed(files, fileList) {
				this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
			},
			beforeRemove(file, fileList) {
				return this.$confirm(`确定移除 ${ file.name }？`);
			},
			/*上传相关操作*/
			upload(val){
				document.getElementById(val).click();
			},
			change(val){
				this.secondForm = val;
			},
			chooseEveryMonth(){
				console.log(this.form.everyMonth);
				this.form.everyMonth = this.everyMonth;
				this.everyMonthVisible=false;
			},
			uploadFuJian(){
				document.getElementById("wendang_file").click();
			},
			fabuAreaChange(val){
				console.log(val);
			},
			goBack(){
				this.$emit('goBack');
			},
			chooseResource(val){/*选中资源网段*/
				console.log(val);
				this.resourceWeb = parseInt(val);
				componentServerRegisterGetFabuArea(this,parseInt(val))
			},
			submit(){/*这样一步一步地执行下去，真的很烦，没什么用*/
				if(this.has){
					this.$message.error('名字重复了')
					return false;
				}
				this.loading=true;
				this.tongyongTimeSubmit= !this.tongyongTimeSubmit;
				console.log(this.form);	
			},
			tongyongOutPutForm(val){
				console.log(val);
						if(val.flow===''&&val.frequency===''&&val.timeTpye===''){
							this.form.accessTactics =null;
						}else{
							this.form.accessTactics =val;
						}
				this.ywInfoDescTimeSubmit= !this.ywInfoDescTimeSubmit;
			},
			ywInfoDescOutPutForm(val){
				console.log(val);
				this.form.businessType =val.businessType;
				this.form.infoType =val.infoType;
				this.form.describe =val.describe;
				switch (this.secondForm){
					case 'jiekou':
					this.jiekouTimeSubmit =!this.jiekouTimeSubmit
					break;
					case 'wenjian':
					this.wenjianTimeSubmit =!this.wenjianTimeSubmit
					break;
					case 'datadb':
					this.datadbTimeSubmit =!this.datadbTimeSubmit
					break;
					default:
					break;
				}
			},
			wenjianOutPutForm(val){
				
				this.form.inServiceDataSource =val.inServiceDataSource;
				this.form.outServiceDataSourceList =val.outServiceDataSourceList;
				console.log(this.form);
				componentServerRegisterFormUpdata(this,this.form);/*提交更新整个表单*/
				this.loading=false;
			},
			jiekouOutPutForm(val){
				console.log(val);
				this.form.inServiceDataSource =val.inServiceDataSource;
				this.form.outServiceDataSourceList =val.outServiceDataSourceList;
				componentServerRegisterFormUpdata(this,this.form);/*提交更新整个表单*/
				this.loading=false;
			},
			datadbOutPutForm(val){
				console.log(val);
				this.form.inServiceDataSource =val.inServiceDataSource;
				this.form.outServiceDataSourceList =val.outServiceDataSourceList;
				componentServerRegisterFormUpdata(this,this.form);/*提交更新整个表单*/
				this.loading=false;
			}
        },
        mounted(){
			this.yewuType=this.treeSeach.business_type;
			this.infoType=this.treeSeach.info_type;
			this.resocureRadio = this.treeSeach.segment;
			componentSearchName(this,{pageAble:false,type:1});
			computedDealRegisterUpdata(this,{id:this.updataId});
			
        },
        watch:{
        	treeSeach:{/*深度检测这个对象的变化*/
        		 handler(newVal, oldVal){
        		 	this.yewuType=this.treeSeach.business_type;
        			this.infoType=this.treeSeach.info_type;
        			this.resocureRadio = this.treeSeach.segment;
            	},
            	deep:true
        	},
        	id(newVal){
        	},
			updataId(newVal){/*更新ID*/
				console.log(newVal);
				console.log("++++++");
				console.log(typeof newVal);
        		Object.assign(this.$data, this.$options.data())/*重置data数据*/
        		computedDealRegisterUpdata(this,{id:newVal});
        		
        	}
        }
  };
</script>

<style>
    .server_register_form .title{
    	height: 30px;
	    border-bottom: dashed 1px #afa4a4;
	    line-height: 20px;
	    font-size: 15px;
    }
    .server_register_form .title span{
    	cursor: pointer;
    	color: #5A8BFF;
    }
    .server_register_form .title .el-icon-back{
    	margin-right: 15px;
    }
    
    .server_register_form  .box_checkbox{
    	margin: 5px !important;
    }
    .server_register_form  .box_checkbox .el-checkbox-button__inner{
    	border:  1px solid #dcdfe6;
    }
    
   .server_register_form  .el-checkbox-button.is-checked .el-checkbox-button__inner{
	   	color: #fff;
	    background-color: #409eff;
	    border-color: #409eff;
	    box-shadow: -1px 0 0 0 #8cc5ff;
   }
   .server_register_form  .block{
   	 font-size: 16px;
   	 margin-bottom: 10px;
    	display: inline-block;
    margin-top: 20px;
   }
  .server_register_form  .dashed{
    border-bottom: dashed 1px #afa4a4;
  }
  .server_register_form  .fixed_button{
  	position: fixed;
    bottom: 0px;
    background: #e0eefd80;
    width: 100%;
    height: 60px;
    line-height: 60px;
    text-align: center;
  }
  .server_register_form  .box-radio .el-radio-button__inner{
  	border-radius: 60px;
  	margin: 0 10px;
  }
  .server_register_form .second_form{
  	background: #f5f5f5;
  	padding: 20px;
  }
  
 .server_register_form .block_radio{
 	display: block;
 	margin: 0 0 25px 0;
 }
 
 .server_register_form .everyDay{
 	    position: absolute;
	    top: 25px;
	    left: 100px;
 }
 .server_register_form .everyWeek{
 	 position: absolute;
    top: 65px;
    left: 95px;
 }
    
  .server_register_form .everyMonth_span{
  	    position: relative;
    border: 1px solid #dcdfe6;
    padding: 5px;
    margin: 0 5px;
  }
  
  
  .server_register_form .everyMonth_span .el-icon-circle-close-outline{
  	    position: absolute;
    top: -5px;
    right: -5px;
  }
 .server_register_form label.el-checkbox.everyMonth_checkbox{
 	width: 60px;
 	margin-left: 30px;
 }
  .server_register_form .everyMonth{
  	position: absolute;
    top: 115px;
    left: 100px;
  }
     
</style>